<template>
	<div class="register">
		<div class="top">
			<div class="title">
				{{ hospitalDetailStore.hospitalDetail.hospital?.hosname }}
			</div>
			<div class="level">
				<span class="iconfont icon-icon"></span>
				<span>{{
					hospitalDetailStore.hospitalDetail.hospital?.param
						.hostypeString
				}}</span>
			</div>
		</div>
		<div class="content">
			<div class="left">
				<img
					:src="`data:image/jpeg;base64,${hospitalDetailStore.hospitalDetail.hospital?.logoData}`"
					alt="医院Logo"
				/>
			</div>
			<div class="right">
				<div>挂号规则</div>
				<div class="time">
					预约周期:{{
						hospitalDetailStore.hospitalDetail.bookingRule?.cycle
					}}天 放号时间:{{
						hospitalDetailStore.hospitalDetail.bookingRule
							?.releaseTime
					}}, 停挂时间:{{
						hospitalDetailStore.hospitalDetail.bookingRule?.stopTime
					}}
				</div>
				<div class="address">
					<div>
						具体地址:{{
							hospitalDetailStore.hospitalDetail.hospital?.param
								.fullAddress
						}}
					</div>
				</div>
				<div class="route">
					<div>
						乘车路线:{{
							hospitalDetailStore.hospitalDetail.hospital?.route
						}}
					</div>
				</div>
				<div class="releasetTime">
					<div>
						退号时间:就诊前一个工作日{{
							hospitalDetailStore.hospitalDetail.bookingRule
								?.quitTime
						}}前取消
					</div>
				</div>
				<div class="rule">
					<div>医院预约规则</div>
					<div
						class="ruleInfo"
						v-for="item in hospitalDetailStore.hospitalDetail
							.bookingRule?.rule"
					>
						{{ item }}
					</div>
				</div>
			</div>
		</div>
		<!-- 展示每一个人科室的数据 -->
		<div class="department">
			<div class="leftNav" ref="leftNavRef">
				<div ref="leftNavContentRef">
					<ul>
						<li
							v-for="(
								item, index
							) in hospitalDetailStore.deparmentArr"
							:key="index"
							:class="{ active: index == currentIndex }"
							@click="selectIndex(index)"
						>
							{{ item.depname }}
						</li>
					</ul>
				</div>
			</div>
			<div class="departmentInfo" ref="departmentInfoRef">
				<div ref="departmentContentRef">
					<!-- 展示大科室与小科室(诊室) -->
					<div
						class="showDepartment"
						v-for="(
							deparment, index
						) in hospitalDetailStore.deparmentArr"
						:key="index"
					>
						<h1 class="cur" ref="curRefs" :data-index="index">
							{{ deparment.depname }}
						</h1>
						<!-- 每一的大科室下的小科室(诊室) -->
						<ul>
							<li
								v-for="(item, index) in deparment.children"
								:key="index"
							>
								{{ item.depname }}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted, nextTick } from 'vue'
import BScroll from '@better-scroll/core'
import ScrollBar from '@better-scroll/scroll-bar'
import MouseWheel from '@better-scroll/mouse-wheel'
import useDetailStore from '@/store/modules/hospitalDetail'

// 注册插件
BScroll.use(ScrollBar)
BScroll.use(MouseWheel)

// 引入医院的详情的数据仓库
const hospitalDetailStore = useDetailStore()

// 控制科室高亮的的响应式数据
const currentIndex = ref(0)

// DOM 引用
const leftNavRef = ref(null)
const leftNavContentRef = ref(null)
const departmentInfoRef = ref(null)
const departmentContentRef = ref(null)
const curRefs = ref([])

// BetterScroll 实例
let leftNavScroll: any = null
let departmentScroll: any = null

// 选择科室
const selectIndex = (value: number) => {
	currentIndex.value = value

	// 滚动左侧导航到当前选中项
	if (leftNavScroll) {
		const targetLi = leftNavContentRef.value.querySelector(
			`li:nth-child(${value + 1})`
		)
        console.log("targetLi",targetLi)
		if (targetLi) {
			leftNavScroll.scrollToElement(targetLi, 300, {
				easing: {
					style: 'cubic-bezier(0.16, 1, 0.3, 1)',
					fn: function (t) {
						if ((t /= 0.5) < 1) return 0.5 * t * t * t
						return 0.5 * ((t -= 2) * t * t + 2)
					},
				},
			})
		}
	}

	// 滚动右侧内容到对应科室
	if (departmentScroll) {
		const targetH1 = departmentContentRef.value.querySelector(
			`.cur[data-index="${value}"]`
		)
		if (targetH1) {
			const targetRect = targetH1.getBoundingClientRect()
			const wrapperRect = departmentInfoRef.value.getBoundingClientRect()
			const offsetY = targetRect.top - wrapperRect.top - 10 // 10px 顶部间距

			departmentScroll.scrollTo(0, -offsetY, 500, {
				easing: {
					style: 'cubic-bezier(0.16, 1, 0.3, 1)',
					fn: function (t) {
						if ((t /= 0.5) < 1) return 0.5 * t * t * t
						return 0.5 * ((t -= 2) * t * t + 2)
					},
				},
			})
		}
	}
}

onMounted(() => {
	nextTick(() => {
		// 初始化左侧导航滚动
		leftNavScroll = new BScroll(leftNavRef.value, {
			scrollY: true,
			click: true,
			scrollbar: {
				fade: true,
				interactive: true,
			},
			mouseWheel: {
				speed: 20,
				invert: false,
				easeTime: 300,
			},
		})

		// 初始化右侧内容滚动
		departmentScroll = new BScroll(departmentInfoRef.value, {
			scrollY: true,
			click: true,
			scrollbar: {
				fade: true,
				interactive: true,
			},
			probeType: 3,
			mouseWheel: {
				speed: 20,
				invert: false,
				easeTime: 300,
			},
		})

		// 监听右侧内容滚动，更新导航高亮
		departmentScroll.on('scroll', (pos) => {
			updateActiveSection(pos.y)
		})

		// 初始更新一次高亮状态
		updateActiveSection(0)
	})
})

// 更新当前激活的科室
const updateActiveSection = (scrollY) => {
	const sections =
		departmentContentRef.value.querySelectorAll('.showDepartment')
	let currentSectionIndex = 0

	sections.forEach((section, index) => {
		const sectionTop = section.offsetTop - 100 // 100px 偏移量，可根据需要调整
		const sectionBottom = sectionTop + section.offsetHeight

		if (-scrollY >= sectionTop && -scrollY < sectionBottom) {
			currentSectionIndex = index
		}
	})

	if (currentSectionIndex !== currentIndex.value) {
		currentIndex.value = currentSectionIndex

		// 更新左侧导航高亮
		const activeLi = leftNavContentRef.value.querySelector(
			`li:nth-child(${currentSectionIndex + 1})`
		)
		if (activeLi) {
			// 确保当前激活的导航项在可视区域内
			const activeLiRect = activeLi.getBoundingClientRect()
			const wrapperRect = leftNavRef.value.getBoundingClientRect()

			if (
				activeLiRect.top < wrapperRect.top ||
				activeLiRect.bottom > wrapperRect.bottom
			) {
				leftNavScroll.scrollToElement(activeLi, 300)
			}
		}
	}
}

onUnmounted(() => {
	// 销毁 BetterScroll 实例
	if (leftNavScroll) {
		leftNavScroll.destroy()
		leftNavScroll = null
	}

	if (departmentScroll) {
		departmentScroll.destroy()
		departmentScroll = null
	}
})
</script>

<style lang="scss" scoped>
.register {
	.top {
		display: flex;
		.title {
			font-size: 30px;
			font-weight: 300;
		}
		.level {
			color: #7f7f7f;
			margin-left: 10px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			span {
				margin-left: 5px;
			}
		}
	}
	.content {
		display: flex;
		margin: 20px 0 0 0;
		.left {
			width: 80px;
			img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}
		.right {
			flex: 1;
			font-size: 14px;
			margin-left: 10px;
			.time,
			.address,
			.route,
			.releasetTime,
			.ruleInfo {
				margin: 10px 0 0 0;
				color: #7f7f7f;
			}
		}
	}
	.department {
		width: 100%;
		height: 500px;
		display: flex;
		margin: 20px 0 0 0;
		.leftNav {
			width: 80px;
			height: 100%;
			background-color: #f8f8f8;
			position: relative;
			overflow: hidden;
			ul {
				li {
					line-height: 39px;
					text-align: center;
					cursor: pointer;
					&.active {
						width: 100%;
						border-left: 1px solid red;
						color: red;
						background-color: white;
					}
				}
			}
		}
		.departmentInfo {
			flex: 1;
			margin-left: 20px;
			position: relative;
			overflow: hidden;
			.showDepartment {
				h1 {
					width: 100%;
					height: 29px;
					background-color: rgb(248, 248, 248);
					line-height: 29px;
					margin-bottom: 5px;
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					li {
						width: 30%;
						color: #7f7f7f;
						line-height: 20px;
					}
				}
			}
		}
	}
}
</style>
